<template>
  <div class="userCenter_container">
    <div class="user_profile">
      <div class="user_avatar">
        <p @click="avatarDialogVisible = true">更换头像</p>
        <img :src="form.avatar" alt="" @click="avatarDialogVisible = true" />
      </div>
      <div class="username">{{ form.username }}</div>
    </div>

    <el-tabs type="border-card" class="user-tabs">
      <el-tab-pane label="基本资料">
        <el-form :model="form" label-width="120px">
          <el-form-item label="Activity name">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity time">
            <el-col :span="11">
              <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
            </el-col>
          </el-form-item>
          <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
          </el-form-item>
          <el-form-item label="Activity type">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="Online activities" name="type" />
              <el-checkbox label="Promotion activities" name="type" />
              <el-checkbox label="Offline activities" name="type" />
              <el-checkbox label="Simple brand exposure" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="Resources">
            <el-radio-group v-model="form.resource">
              <el-radio label="Sponsor" />
              <el-radio label="Venue" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码">修改密码</el-tab-pane>
    </el-tabs>
  </div>

  <Avatar v-model:avatarDialogVisible="avatarDialogVisible" @handleDialogConfirm="handleDialogConfirm"
    @handleDialogCancel="handleDialogCancel" :imgStyle="{ width: 300, height: 300 }"
    :zoomStyle="{ middleZoom: 0.5, miniZoom: 0.3 }" :imgUrl="form.avatar" />
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import Avatar from "@/components/avatar/Avatar.vue";
// do not use same name with ref
const form = reactive({
  avatar: "",
  username: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
// 缓存的用户信息
const userInfo = reactive(JSON.parse(localStorage.getItem("userInfo") || ""));

onMounted(() => {
  form.avatar = userInfo.avatar;
  form.username = userInfo.username;
})
// 控制 dialog 显示隐藏
let avatarDialogVisible = ref(false);
// 弹框中的确认按钮事件，参数是剪切图片数据信息
interface ICropData {
  cropBase64: string;
  cropBlob: string;
}
const handleDialogConfirm = (param: ICropData) => {
  base64Data.value = param.cropBase64;
  avatarDialogVisible.value = false;
  form.avatar = base64Data.value;
};
// 弹框中的取消按钮事件
const handleDialogCancel = () => {
  avatarDialogVisible.value = false;
};
// 文本框
let base64Data = ref("");
const onSubmit = () => { };
</script>
<style lang="less" scoped>
.userCenter_container {
  display: flex;
  flex-wrap: wrap;

  & .user_profile {
    & .user_avatar {
      margin-right: 20px;
      cursor: pointer;
      width: 160px;
      height: 160px;
      position: relative;

      & p {
        position: absolute;
        display: none;
        margin: 50% 35%;
        transition: all 0.6s;
        opacity: 0;
        width: 100%;
        color: white;
      }

      &:hover p {
        display: inline;
        opacity: 1;
        z-index: 1;
      }

      & img {
        width: 160px;
        height: 160px;
        border-radius: 90px;
        border: 5px solid #eeeeee;
        transition: all 0.6s;
      }

      &:hover img {
        filter: brightness(50%);
        opacity: 1;
      }
    }

    & .username {
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
      text-align: center;
      margin: 20px;
    }
  }
}

.user-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.user-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.user-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
